import React from 'react';

import Image from 'next/image';
import Link from 'next/link';

import { cn } from '@/utils/utils';

type Props = {
    className?: string;
};

const Sponsor = ({ className }: Props) => {
    return (
        <Link
            href="https://yaolifeng.com/sponsor.html"
            target="_blank"
            className={cn(
                'group relative text-muted-foreground hover:text-foreground transition-all duration-300',
                'hover:scale-110 active:scale-95',
                className,
            )}
            title="请我喝咖啡 ☕"
        >
            <div className="relative">
                {/* 主图标 */}
                <div
                    className={cn(
                        'text-lg transition-all duration-300 ease-in-out',
                        'group-hover:scale-125 group-hover:rotate-12',
                        'group-hover:drop-shadow-lg',
                    )}
                >
                    ☕
                </div>

                {/* 悬停时的光晕效果 */}
                <div
                    className={cn(
                        'absolute inset-0 rounded-full opacity-0 group-hover:opacity-100',
                        'bg-gradient-to-r from-amber-400/30 to-orange-400/30',
                        'blur-sm scale-150 transition-all duration-300',
                        'animate-pulse',
                    )}
                />

                {/* 悬停时的小心心动画 */}
                <div
                    className={cn(
                        'absolute -top-1 -right-1 opacity-0 group-hover:opacity-100',
                        'transition-all duration-500 delay-100',
                        'group-hover:animate-bounce text-xs',
                    )}
                >
                    ❤️
                </div>
            </div>
        </Link>
    );
};

export default Sponsor;
